<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-0"
    ></u-loading-page>
    <!-- #ifdef APP-PLUS -->
    <view
      class="w-full bg-black"
      :style="{ height: statusBarHeight * 2 + 'rpx' }"
    ></view>
    <!-- #endif -->
    <!--头部-->
    <view class="relative">
      <!-- #ifdef APP-PLUS -->
      <view
        class="fixed left-3 top-10 z-10 bg-white w-8 h-8 rounded-full flex justify-center shadow opacity-70"
        @click="onBack"
        ><u-icon name="arrow-left" color="#333333" size="36rpx"></u-icon
      ></view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view
        class="fixed left-3 top-3 z-10 bg-white w-8 h-8 rounded-full flex justify-center shadow opacity-70"
        @click="onBack"
        ><u-icon name="arrow-left" color="#333333" size="36rpx"></u-icon
      ></view>
      <!-- #endif -->
      <view
        class="absolute left-0 top-0"
        style="z-index: 1"
        v-if="detail.saleStatus == 2"
      >
        <u--image
          src="/static/images/watermarkDone.png"
          width="750rpx"
          height="750rpx"
        ></u--image>
      </view>
      <u--image
        :src="detail.productImg"
        width="100%"
        height="750rpx"
      ></u--image>
    </view>
    <view class="bg-white">
      <view class="mx-2.5 py-2">
        <view class="flex justify-between items-center">
          <view class="flex items-center">
            <view class="font-semibold mr-2.5 text-base"
              >￥ <text class="text-lg">{{ detail.deliveryPrice }}</text></view
            >
            <view
              class="text-xs text-white rounded h-6 leading-6 px-2"
              :class="detail.storeType == 40 ? 'bg-orange' : 'bg-black'"
              >{{ detail.storeType == 40 ? '淘宝' : '抖音' }}</view
            >
          </view>
          <view class="text-xs text-light"
            >销量{{ detail.saleCount }} | 库存{{ detail.leaveCount }}</view
          >
        </view>
        <view class="text-sm leading-7 truncate">{{
          detail.activityName
        }}</view>
      </view>
    </view>
    <!--内容-->
    <view class="bg-white mt-2.5">
      <view class="mx-2.5">
        <view class="">
          <u-tabs
            :list="tabList"
            lineWidth="12"
            lineHeight="12"
            lineColor="#FF3D62"
            :activeStyle="{ color: '#333333' }"
            :inactiveStyle="{ color: '#999999' }"
            :current="currentIndex"
            @click="typeTab"
          ></u-tabs>
        </view>
        <view class="border-b-gray w-full mt-2"></view>
        <view class="py-4" v-if="currentIndex == 0">
          <view class="flex items-center">
            <view class="w-1/5">
              <view class="text-xs text-center leading-7">下单</view>
              <view class="text-center">{{ detail.orderPrice }}</view>
            </view>
            <view class="w-1/5 text-center text-sm">-</view>
            <view class="w-1/5">
              <view class="text-xs text-center leading-7">补贴</view>
              <view class="text-center">{{
                (detail.orderPrice - detail.deliveryPrice).toFixed(2)
              }}</view>
            </view>
            <view class="w-1/5 text-center text-sm">=</view>
            <view class="w-1/5">
              <view class="text-xs text-center leading-7">到手</view>
              <view class="text-center">{{ detail.deliveryPrice }}</view>
            </view>
          </view>
        </view>
        <view class="pt-2 pb-4" v-else>
          <view class="text-sm leading-10">
            01 报名活动<br />02 按活动流程到指定活动平台下单<br />03
            等待商家发货<br />04 确认收货，提交凭证<br />05 返还下单本金
          </view>
          <view class="border-b-gray w-full my-2"></view>
          <view class="text-xs text-light leading-6">
            1、请勿试用淘宝客链接下单<br />
            2、禁止使用红包、积分、优惠券、淘金币等差额的方式下单 <br />
            3、禁止使用分期、信用卡、花呗等方式支付 <br />
            4、确认收货后，请耐心等待平台返还本金，有任何问题请联系平台客服！
          </view>
        </view>
      </view>
    </view>
    <view class="h-14"></view>
    <!--底部-->
    <view class="fixed bottom-0 left-0 bg-white w-full py-1">
      <view
        class="text-small leading-6 bg-detail-pink text-center text-light"
        v-if="detail.hasBuy == '1'"
        ><view class="mx-3"
          >近期您已经购买过本店铺商品，暂不符合申请该活动。</view
        ></view
      >
      <view class="mx-2.5">
        <view class="flex justify-between items-center w-full">
          <view class="w-1/6" @click="goTo('schedule-add')">
            <view class="flex justify-center"
              ><u-icon
                name="/static/icons/icon-customer.png"
                size="48rpx"
              ></u-icon
            ></view>
            <view class="flex justify-center text-xs">客服</view>
          </view>
          <view
            class="w-5/6 h-8 leading-8 bg-primary text-white text-sm text-center rounded-full"
            v-if="detail.saleStatus == 0"
            >{{ detail.begSaleTime }} 开售</view
          >
          <view
            class="w-5/6 h-8 leading-8 text-sm text-center rounded-full"
            :class="
              detail.hasBuy == '0'
                ? 'bg-primary text-white'
                : 'bg-medium text-light'
            "
            v-if="detail.saleStatus == 1"
            @click="applyPreTo()"
            >立即申请</view
          >
          <view
            class="w-5/6 h-8 leading-8 bg-medium text-white text-sm text-center rounded-full"
            v-if="detail.saleStatus == 2"
            >已售罄</view
          >
        </view>
      </view>
    </view>
    <!--弹窗-->
    <u-popup :show="isClose" mode="center" round="15" bgColor="#FFFFFF">
      <view class="w-72 mx-4 py-2.5">
        <view class="text-sm leading-10">您有多笔订单暂未作出评价</view>
        <view class="text-xs text-light leading-6"
          >为了促进商家提供更优质的产品与服务，建议您积极参与评价，为后续的消费者提供真实的购物参考。</view
        >
        <view class="mx-14 py-5">
          <view
            class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow bg-light"
            v-if="isCountdown"
          >
            <u-count-down
              :time="seconds"
              format="ss"
              autoStart
              @change="onChange"
              @finish="isCountdown = false"
            >
              <view class="time">
                <!-- <text class="time__item">{{ timeData.minutes }}&nbsp;分</text> -->
                <text class="time__item"
                  >{{ timeData.seconds }}&nbsp;秒后可关闭</text
                >
              </view>
            </u-count-down></view
          >
          <view
            class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-box-shadow bg-primary"
            @click="closeTo()"
            v-else
            >关闭</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getProductDetail,
  applyOrder,
  applyOrderPreCheck,
} from '../../services/common';

export default {
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      isLoading: true,
      detail: {},
      tabList: [
        { name: '补贴', type: 0, index: 0 },
        { name: '流程', type: 1, index: 1 },
      ],
      currentIndex: 0,
      isClose: false,
      isCountdown: true,
      //倒计时秒数
      seconds: 10000,
      timeData: {},
    };
  },
  async created() {
    const { id } = this.$Route.query;
    this.getGoodDetail(id);
  },
  methods: {
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //关闭弹窗执行方法
    closeTo() {
      this.isClose = false;
      this.applyTo();
    },
    //倒计时组件
    onChange(e) {
      this.timeData = e;
    },
    //立即申请前置请求检查
    async applyPreTo() {
      //判断是否可以提交申请
      if (this.detail.hasBuy == '1') {
        uni.$u.toast('近期您已经购买过本店铺商品，暂不符合申请该活动。');
        return;
      }
      const { code, data, msg } = await applyOrderPreCheck();
      if (code == 200) {
        this.applyTo();
      } else {
        //隐藏消息提示框。
        uni.hideToast();
        this.isClose = true;
      }
    },
    //返回上一页
    onBack() {
      uni.navigateBack();
    },
    //商品详情信息
    async getGoodDetail(id) {
      const { code, data } = await getProductDetail({
        id,
      });
      if (code != 200) return;
      this.isLoading = false;
      this.detail = data;
    },
    //容器Tab
    typeTab(item) {
      this.currentIndex = item.index;
    },
    //立即申请
    async applyTo() {
      //console.log('id':this.detail.id,'mediaType':this.detail.storeType);
      const { code, data, msg } = await applyOrder({
        id: this.detail.id,
        mediaType: this.detail.storeType.toString(),
      });
      //当用户未绑定淘宝/抖音账号时，自动跳转到绑定第三方账号的页面
      if (code == 901) {
        uni.$u.toast(msg);
        setTimeout(() => {
          this.$Router.push({
            name: 'account-set',
          });
        }, 800);
      }
      //跳转到待操作列表，具体提示根据接口返回
      if (code == 902) {
        uni.$u.toast(msg);
        setTimeout(() => {
          this.$Router.push({
            name: 'order',
            params: {
              searchType: 1,
            },
          });
        }, 800);
      }
      if (code != 200) return;
      uni.$u.toast('恭喜您！申请成功');
      setTimeout(() => {
        this.$Router.push({
          name: 'order',
          params: {
            searchType: 1,
          },
        });
      }, 800);
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
.bg-detail-pink {
  background: #ffdfe5;
}
</style>
